@import './q-select-tags.scss';
@import './q-select-dropdown.scss';

.q-select {
  position: relative;
  display: inline-flex;
  width: 100%;
  min-height: 40px;
  vertical-align: middle;

  &__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .q-input__inner {
      height: 100%;
      padding-right: 30px;
      text-overflow: ellipsis;
      user-select: none;
    }
  }

  &__dropdown_animation {
    &-enter-active,
    &-leave-active {
      transition: opacity var(--transition-spline-base) 0.25s;

      .q-select-dropdown__wrapper {
        transition: margin-top var(--transition-spline-base) 0.25s;
      }
    }

    &-enter-from,
    &-leave-to {
      opacity: 0;

      .q-select-dropdown__wrapper {
        margin-top: -8px;
      }
    }
  }
}
